<template>
  <div>
    <div class="top">
      <!-- 操作按钮 -->
      <div class="top-op">
        <el-button
          type="danger"
          :disabled="selectedIdList.length == 0"
          @click="delFileBatch"
        >
          <span class="iconfont icon-del"></span>批量删除
        </el-button>
        <div class="search-panel">
          <el-input
            clearable
            placeholder="搜索我的文件"
            v-model="fileNameFuzzy"
            @keyup.enter="search"
          >
            <template #suffix>
              <i class="iconfont icon-search" @click="search"></i>
            </template>
          </el-input>
        </div>
        <div class="iconfont icon-refresh" @click="loadDataList"></div>
      </div>

      <!-- 导航条 -->
      <Navigation ref="navigationRef" @navChange="navChange"></Navigation>
    </div>
    <!-- 文件列表 -->
    <div class="file-list">
      <Table
        ref="dataTableRef"
        :columns="columns"
        :dataSource="tableData"
        :fetch="loadDataList"
        :initFetch="false"
        :options="tableOptions"
        @rowSelected="rowSelected"
      >
        <template #fileName="{ index, row }">
          <div
            class="file-item"
            @mouseenter="showOp(row, 1)"
            @mouseleave="showOp(row, 0)"
          >
            <!-- 图片、视频的图标为封面图片，转码成功的 -->
            <template
              v-if="(row.fileType == 1 || row.fileType == 3) && row.status == 2"
            >
              <Icon :cover="row.fileCover" :width="32"></Icon>
            </template>
            <template v-else>
              <!-- 其他文件根据文件类型显示图标 -->
              <Icon v-if="row.fileClass == 1" :fileType="row.fileType"></Icon>
              <!-- 文件夹图标fileType=0 -->
              <Icon v-if="row.fileClass == 2" :fileType="0"></Icon>
            </template>

            <span class="file-name" :title="row.fileName">
              <span @click="clickFile(row)">{{ row.fileName }}</span>
              <!-- 转码状态 -->
              <span v-if="row.status == 0" class="transfer-status">转码中</span>
              <span v-if="row.status == 1" class="transfer-fail">转码失败</span>
            </span>

            <span class="op">
              <!-- fileId存在（新建文件夹时无fileId）、状态为转码成功的 -->
              <template v-if="row.showOp && row.fileId && row.status == 2">
                <!-- 仅文件可下载 -->
                <span
                  class="iconfont icon-download"
                  title="下载"
                  @click="download(row)"
                  v-if="row.fileClass == 1"
                  >下载</span
                >
                <span
                  class="iconfont icon-del"
                  title="删除"
                  @click="delFile(row)"
                  >删除</span
                >
              </template>
            </span>
          </div>
        </template>
        <template #fileSize="{ index, row }">
          <span v-if="row.fileSize">{{
            proxy.Utils.size2Str(row.fileSize)
          }}</span>
        </template>
      </Table>
    </div>

    <!-- 文件预览组件 -->
    <Preview ref="previewRef"></Preview>
  </div>
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";

const { proxy } = getCurrentInstance();

const api = {
  loadDataList: "/admin/loadFileList",
  deleteFile: "/admin/deleteFile",
  createDownloadCode: "/admin/createDownloadCode",
};

const columns = [
  {
    label: "文件名",
    prop: "fileName",
    scopedSlots: "fileName",
    minWidth: 360,
  },
  {
    label: "发布人",
    prop: "nickName",
    width: 200,
  },
  {
    label: "修改时间",
    prop: "updateTime",
    width: 200,
  },
  {
    label: "大小",
    prop: "fileSize",
    width: 200,
    scopedSlots: "fileSize",
  },
];

const dataTableRef = ref({});
const tableData = ref({});
const tableOptions = ref({
  exHeight: 50,
  selectType: "checkbox",
});

const fileNameFuzzy = ref();
const showLoading = ref(true);

// 当前目录
const currentFolder = ref({ fileId: "0" });

// 加载文件列表
const loadDataList = async () => {
  let params = {
    pageNo: tableData.value.pageNo,
    pageSize: tableData.value.pageSize,
    fileNameFuzzy: fileNameFuzzy.value,
    filePid: currentFolder.value.fileId,
  };

  let result = await proxy.Request({
    url: api.loadDataList,
    showLoading: showLoading.value,
    params: params,
  });

  if (!result) {
    return;
  }

  tableData.value = result.data;
};

// 搜索文件
const search = () => {
  showLoading.value = true;
  loadDataList();
};

const previewRef = ref();
// 点击文件
const clickFile = (data) => {
  // 文件夹点击进入
  if (data.fileClass == 2) {
    navigationRef.value.openFolder(data);
    return;
  }

  // 文件点击进行预览
  if (data.status != 2) {
    proxy.Message.warning("文件未完成转码，无法预览");
    return;
  }

  previewRef.value.showPreview(data, 1);
};

const navigationRef = ref();
// 导航回调方法
const navChange = (data) => {
  const { currFolder } = data;
  currentFolder.value = currFolder;

  loadDataList();
};

// 展示操作按钮
const showOp = (row, type) => {
  // 遍历所有文件列表，隐藏全部文件的操作按钮
  tableData.value.list.forEach((item) => {
    item.showOp = false;
  });
  // 显示当前文件的操作按钮
  if (type == 1) {
    row.showOp = true;
  }
};

// 已选中的文件列表
const selectedIdList = ref([]);

// 选中文件操作
const rowSelected = (rows) => {
  selectedIdList.value = [];
  rows.forEach((item) => {
    selectedIdList.value.push(item.fileId + "_" + item.userId);
  });
};

// 下载文件
const download = async (row) => {
  let result = await proxy.Request({
    url: api.createDownloadCode + "/" + row.userId + "/" + row.fileId,
  });

  if (!result) {
    return;
  }

  window.location.href = proxy.globalInfo.downloadUrl + result.data;
};

// 删除文件
const delFile = (row) => {
  proxy.Confirm(
    `你确定要删除【${row.fileName}】吗？删除的文件不可恢复`,
    async () => {
      let result = await proxy.Request({
        url: api.deleteFile,
        params: {
          fileIdAndUserIds: row.fileId + "_" + row.userId,
        },
      });

      if (!result) {
        return;
      }

      loadDataList();
    }
  );
};

// 批量删除文件
const delFileBatch = () => {
  if (selectedIdList.value.length == 0) {
    return;
  }

  proxy.Confirm("你确定要删除这些文件吗？删除的文件不可恢复", async () => {
    let result = await proxy.Request({
      url: api.deleteFile,
      params: {
        fileIdAndUserIds: selectedIdList.value.join(","),
      },
    });

    if (!result) {
      return;
    }

    loadDataList();
  });
};
</script>
<style lang="scss" scoped>
@import "@/assets/file_list.scss";

.file-list {
  margin-top: 10px;

  .file-item {
    .op {
      width: 120px;
    }
  }
}
</style>
